/* color palette from <https://github.com/vuejs/theme> */

:root {
	--vt-c-white: #ffffff;
	--vt-c-white-soft: #f8f8f8;
	--vt-c-white-mute: #f2f2f2;

	--vt-c-black: #181818;
	--vt-c-black-soft: #222222;
	--vt-c-black-mute: #282828;

	--vt-c-indigo: #2c3e50;

	--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
	--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
	--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
	--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

	--vt-c-text-light-1: var(--vt-c-indigo);
	--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
	--vt-c-text-dark-1: var(--vt-c-white);
	--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);

	--gray_0: #000;
	--gray_20: #2b2e33;
	--gray_35: #4c5059;
	--gray_50: #737780;
	--gray_70: #a9acb2;
	--gray_80: #c8c9cc;
	--gray_85: #d4d6d9;
	--gray_90: #e1e3e5;
	--gray_93: #e8eaed;
	--gray_95: #edeff2;
	--gray_96: #f0f2f5;
	--gray_97: #f4f5f7;
	--gray_98: #f7f8fa;
	--gray_100: #fff;
	--green_n: #05c1b7;
	--green_h: #06e5da;
	--green_a: #ebffff;
	--red_n: #e53c23;
	--red_h: #ff5840;
	--red_a: #ffedeb;
	--blue_n: #4378e0;
	--blue_h: #6699ff;
	--blue_a: #ebf1ff;
	--yellow_n: #fab246;
	--yellow_h: #ffc773;
	--yellow_a: #fef4e5;
	--on_surface: #fff;
	--bg_white: #fff;
	--bg_gray: #f7f8fa;
	--bg_float: #fff;
	--bg_default_0: #111214;
	--bg_default_1: #646566;
	--bg_default_2: #2b2e33;
	--bg_default_3: #b8b8b8;
	--codeShaDow: rgba(6, 9, 15, 0.18);
	--headShadow: rgba(255, 255, 255, 0.95);
	--studyBg: #e1e3e5;
	--studyButtonGradient1: #ff8826;
	--studyButtonGradient2: #ffa733;
	--studyGreen_0: #009991;
	--studyGreen_1: #05c1b7;
	--studyGreen_2: #008c85;

	--content-width:1400px;
}

/* semantic color variables for this project */
:root {
	--color-background: var(--vt-c-white);
	--color-background-soft: var(--vt-c-white-soft);
	--color-background-mute: var(--vt-c-white-mute);

	--color-border: var(--vt-c-divider-light-2);
	--color-border-hover: var(--vt-c-divider-light-1);

	--color-heading: var(--vt-c-text-light-1);
	--color-text: var(--vt-c-text-light-1);

	--section-gap: 160px;
}

.pointer {
	cursor: pointer;
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-background: var(--vt-c-black);
		--color-background-soft: var(--vt-c-black-soft);
		--color-background-mute: var(--vt-c-black-mute);

		--color-border: var(--vt-c-divider-dark-2);
		--color-border-hover: var(--vt-c-divider-dark-1);

		--color-heading: var(--vt-c-text-dark-1);
		--color-text: var(--vt-c-text-dark-2);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	font-weight: normal;
}

body {
	min-height: 100vh;
	color: var(--color-text);
	background: var(--color-background);
	transition: color 0.5s, background-color 0.5s;
	line-height: 1.6;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
		'Droid Sans', 'Helvetica Neue', sans-serif;
	font-size: 15px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

nav {
	padding: 0;
}
a,
a:hover {
	text-decoration: none;
}
a {
	outline: none;
}
.fl {
	float: left;
}
.fr {
	float: right;
}
.clearfloat {
	clear: both;
}
.clearfloat::after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}
li,
ol,
ul {
	list-style: none;
}

@keyframes animated-border {
	0% {
		box-shadow: 0 0 5px rgba(255, 255, 255, 1);
	}

	50% {
		box-shadow: 0 0 5px rgba(0, 0, 0, 1);
	}
	100% {
		box-shadow: 0 0 5px rgba(255, 255, 255, 1);
	}
}
.animated-border {
	animation: animated-border 5s infinite;
}

/* .my-popper .el-popover.el-popper{
    min-width: 80px  !important;
} */
